<template>
	<view class="box">
		<!-- 选择会员 -->
		<view class="selectMember">
			<view class="member">
				<view @click="selected != 1 ? memberdialog = true : ''">{{userName || '会员：'}}</view>
				<view style="position: relative;">{{fillFormDate || '日期：'}}
					<picker mode="date" :start="start" :end="end" @change="bindDateChange" v-if="selected != 1" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;">
						<view class="date">{{fillFormDate}}</view>
					</picker>
				</view>
			</view>
			<view class="save" v-if="selected != 1" @click="seveAdd(1)">保存</view>
			<view class="toSend" @click="seveAdd(3)">生成评估</view>
		</view>

		<view class="content">
			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/general@2x.png"></image></view>
				<table>
					<tr>
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(item,index) in enterData" :key="index">
						<td>{{item.inputName}}</td>
						<td>{{item.inputCompany}}</td>
						<td v-if="item.inputName == '收缩压/舒张压'">
							<input type="number" v-model="bloodPressure1" data-name="bloodPressure1" :disabled="index == 2 || selected == 1" @input="basicInput"
							 placeholder="数值"> |
							<input type="number" v-model="bloodPressure2" data-name="bloodPressure2" :disabled="index == 2 || selected == 1" @input="basicInput"
							 placeholder="数值">
						</td>
						<td v-else>
							<input type="number" v-model="data[item.name]" :data-id="index" :disabled="index == 2 || selected == 1" @input="basicInput"
							 placeholder="数值">
						</td>
					</tr>
				</table>
			</view>
			
			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/biochemical@2x.png"></image></view>
				<table>
					<tr>
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(item,index) in biochemistry" :key="index">
						<td>{{item.inputName}}</td>
						<td v-if="item.inputName == '白细胞计数' || item.inputName == '红细胞计数' || item.inputName == '血小板计数'">
							<image mode="widthFix" src="@/static/img/healthStatus/icon-109.png" style="width:80rpx;"></image>
						</td>
						<td v-else>{{item.inputCompany}}</td>
						<td v-if="item.inputName == '收缩压/舒张压'">
							<input type="number" v-model="bloodPressure1" data-name="bloodPressure1" :disabled="index == 2 || selected == 1" @input="basicInput"
							 placeholder="收缩压"> |
							<input type="number" v-model="bloodPressure2" data-name="bloodPressure2" :disabled="index == 2 || selected == 1" @input="basicInput"
							 placeholder="舒张压">
						</td>
						<td v-else>
							<input type="number" v-model="data[item.name]" @input="basicInput" :disabled="selected == 1" placeholder="数值">
						</td>
					</tr>
				</table>
			</view>

			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/auxiliary@2x.png" style="width: 204upx;"></image></view>
				<table>
					<tr>
						<td>检查项目</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(aitem,aindex) in auxiliaryData" :key="aindex">
						<td>{{aitem.name}}</td>
						<td>
							<input type="text" placeholder="正常/异常名称" v-model="aitem.value">
						</td>
					</tr>
					<tr v-for="(aitem,aindex) in parameterValues" :key="'b'+aindex">
						<td>
							<input type="text" v-model="aitem.name" placeholder="项目">
						</td>
						<td class="delStyle">
							<input type="text" v-model="aitem.value" placeholder="正常/异常名称">
							<image src="@/static/img/quickly/follow/closeFollow.png" mode="widthFix" class="delImage" @click="del(aindex)"></image>
						</td>
					</tr>
					<view class="addOther" @click="addDynamicData">
						<image src="@/static/img/healthStatus/addFollow.png"></image>添加其他
					</view>
				</table>
			</view>

			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/otherInspection@2x.png"></image></view>
				<table>
					<tr v-if="isCheckDxData && isCheckDxData.length > 0">
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-if="isCheckDxData && isCheckDxData.length > 0" v-for="(bitem,bindex) in isCheckDxData" :key="bindex">
						<td>{{bitem.name}}</td>
						<td>{{bitem.units || '-'}}</td>
						<td><input type="text" v-model="bitem.input" placeholder="数值"></td>
					</tr>

					<view class="addOther" @click="[dialog=true,type='dxsj',getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]"
					 style="background-color: #F6F7FB;">
						<image src="@/static/img/healthStatus/addFollow.png"></image>选择体检项目
					</view>
				</table>
			</view>

			<view class="dialog" v-if="dialog">
				<view class="bg" @click="dialog = false"></view>
				<view class="content">
					<view class="search">
						项目名称：<input type="text" v-model="abnormalName" />
						<span @click="onSearch">查询</span>
						<span @click="dialogSubmit" class="solidColor">确认</span>
					</view>
					<wyb-table ref="table" :headers="dialogHeaders2" @onCheck="onCheck" :contents="dialogcontents" @callbackdata="getcallbackdata"
					 width="88vw" height="50vh" enable-check="multiple" text-align="left" header-bg-color="#38CB97" header-ft-color="#fff"
					 checker-border-color="#ccc" first-col-bg-color="#fff" checker-cell-bg-color="#fff" checker-box-bg-color="#fff"
					 border-bottom="none" />
					<view class="btn">
						<span @click="[tiOption.pageIndex--,getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]">上一页</span>
						<span @click="[tiOption.pageIndex++,getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]">下一页</span>
					</view>
				</view>
				<view class="closeImage">
					<image mode="widthFix" src="@/static/img/quickly/internation/del.png" @click="dialog = false"></image>
				</view>
			</view>
		</view>
		<member :dialog.sync="memberdialog" @hidedialog="hidedialog" @chooseUser="chooseUser"></member>
		<reportImg ref="reportImg" :info="info"></reportImg>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import member from '@/components/selectMember/selectMember.vue'
	import reportImg from './reportImg.vue'
	import {
		getUrlParam,
		filterData2
	} from '@/static/js/filter.js'
	export default {
		components: {
			wybTable,
			member,
			reportImg
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				data: {},
				// organ:'',
				fillFormDate: '',
				userName: '',
				entrance: '',
				start: '',
				end: '',
				examinationOrgan: '',
				enterData: [
					{
						inputName: '身高',
						inputCompany: 'm',
						inputData: '',
						name: 'height'
					}, {
						inputName: '体重',
						inputCompany: 'kg',
						inputData: '',
						name: 'weight'
					}, {
						inputName: '体重指数',
						inputCompany: 'kg/m²',
						inputData: '',
						name: 'bodyIndex'
					}, {
						inputName: '腰围',
						inputCompany: 'cm',
						inputData: '',
						name: 'waist'
					}, {
						inputName: '收缩压/舒张压',
						inputCompany: 'mmHg',
						inputData: '',
						name: 'bloodPressure'
					}, {
						inputName: '心率',
						inputCompany: '次/分',
						inputData: '',
						name: 'heartRate'
					}
				],
				biochemistry: [
					{
						inputName: '总胆固醇',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'cholesterol'
					}, {
						inputName: '甘油三酯',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'triacylglycerol'
					}, {
						inputName: '高密度脂蛋白胆固醇',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'highCholesterol'
					}, {
						inputName: '低密度脂蛋白胆固醇',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'lowCholesterol'
					}, {
						inputName: '空腹血糖',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'bloodGlucose'
					}, {
						inputName: '餐后2小时血糖',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'towBloodGlucose'
					}, {
						inputName: '血尿酸',
						inputCompany: 'μmol/L',
						inputData: '',
						name: 'bloodUricAcid'
					}, {
						inputName: '谷丙转氨酶',
						inputCompany: 'U/L',
						inputData: '',
						name: 'aminotransferase'
					}, {
						inputName: '白细胞计数',
						inputCompany: '109/L',
						inputData: '',
						name: 'whiteCell'
					}, {
						inputName: '总胆红素',
						inputCompany: 'μmol/L',
						inputData: '',
						name: 'bilirubin'
					}, {
						inputName: '红细胞计数',
						inputCompany: '109/L',
						inputData: '',
						name: 'redCell'
					}, {
						inputName: '血尿素氮',
						inputCompany: 'mmol/L',
						inputData: '',
						name: 'bloodUreaNitrogen'
					}, {
						inputName: '血红蛋白',
						inputCompany: 'g/L',
						inputData: '',
						name: 'hemoglobin'
					}, {
						inputName: '血肌酐',
						inputCompany: 'μmol/L',
						inputData: '',
						name: 'bloodMuscle'
					}, {
						inputName: '血小板计数',
						inputCompany: '109/L',
						inputData: '',
						name: 'plateletCount'
					}],
					auxiliaryData: [{
						name: '心电图',
						value: ''
					}, {
						name: '腹部超声',
						value: ''
					}, {
						name: 'X线胸片',
						value: ''
					}
				],
				dynamicData: [], //辅助项目添加其他
				memberdialog: false,
				dialog: false,
				showModal: false,
				showContent: '',
				status: '', //存档状态
				isCheckDxData: [], //选中的单项数据
				dataArr: ['height', 'weight', 'bodyIndex', 'heartRate', 'bloodPressure', 'waist', 'bloodGlucose', 'whiteCell',
					'redCell', 'hemoglobin', 'plateletCount', 'cholesterol', 'triacylglycerol', 'lowCholesterol', 'highCholesterol',
					'aminotransferase', 'bilirubin', 'bloodUreaNitrogen', 'bloodMuscle', 'bloodUricAcid', 'towBloodGlucose'
				],
				// 所有体检项目分页参数
				tiOption: {
					pageIndex: 1,
					totalCount: 0,
				},
				abnormalName: '',
				// 异常体检表头
				dialogHeaders2: [{
					label: '科室',
					key: 'sectionName'
				}, {
					label: '名称',
					key: 'name'
				}, {
					label: '参考范围',
					key: 'va'
				}, {
					label: '单位',
					key: 'units'
				}],
				dialogcontents: [],
				isCheckYcData: [], //选中的异常数据
				parameterValues: [],
				// 异常体检表头
				dialogHeaders3: [{
					label: '名称',
					key: 'name',
					width: 200,
				}, {
					label: '结果',
					key: 'input',
					width: 150,
				}, {
					label: '参考范围',
					key: 'va',
					width: 200,
				}, {
					label: '单位',
					key: 'units',
					width: 200,
				}],
				id: '',
				dataId: [],
				bloodPressure1: '',
				bloodPressure2: '',
				selected: '',
				info:{},
				isSave:false
			}
		},
		mounted() {
			this.id = getUrlParam('id');
			if( getUrlParam('selected')){
				this.selected = 1
			}
			if (this.id) {
				this.$api.HealthExaminationReportDetails(this.id).then((res) => {
					if (res.data.returnCode == 200) {
						this.userId = res.data.result && res.data.result.newExaminationReportRes.userId;
						this.userName = res.data.result && res.data.result.newExaminationReportRes.userName;
						this.organ = res.data.result && res.data.result.newExaminationReportRes.organ;
						this.fillFormDate = res.data.result && res.data.result.newExaminationReportRes.fillFormDate;
						this.data = res.data.result.newExaminationReportRes;
						Object.keys(res.data.result.newExaminationReportRes).map((a)=>{
							if(this.data[a] == '-1'){
								this.data[a] = ''
							}
						})
						this.bloodPressure1 = res.data.result.newExaminationReportRes.bloodPressure == '-1' ? '' : res.data.result.newExaminationReportRes
							.bloodPressure.split('/')[0]
						this.bloodPressure2 = res.data.result.newExaminationReportRes.bloodPressure == '-1' ? '' : res.data.result.newExaminationReportRes
							.bloodPressure.split('/')[1]
						this.auxiliaryData = res.data.result.newExaminationReportRes.auxiliaryExamination && JSON.parse(res.data.result
							.newExaminationReportRes.auxiliaryExamination).map((a) => {
							if (a.value == -1) {
								a.value = ''
							}
							return a
						});
						this.isCheckDxData = res.data.result && res.data.result.newExaminationReportRes.individuals.length > 0 && res.data
							.result.newExaminationReportRes.individuals.map((a) => {
								a.input = a.value;
								a.itemName = a.name;
								a.itemId = a.key;
								return a
							}) || [];
					}
				})
			}

		},
		methods: {
			hidedialog() {
				this.memberdialog = false
			},
			// 日期
			bindDateChange(e) { //日期选择
				this.fillFormDate = e.target.value;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 添加辅助项目
			addDynamicData() {
				this.parameterValues.push({
					name: '',
					value: ''
				})
			},
			del(e) {
				this.parameterValues.splice(e, 1)
			},
			// 选中的异常
			onCheck(e) {
				let data = e.data.map((res) => {
					return res.lineData
				})
				if (this.type == 'yczb') {
					this.isCheckYc = data
				} else {
					this.isCheckDx = data
				}
			},
			dialogSubmit() {
				const isrepeat = []
				this.enterData && this.enterData.map((a) => {
					this.isCheckDx.map((c) => {
						if (c.itemName == a.inputName) {
							isrepeat.push(c)
						}
					})
				})
				if (isrepeat.length > 0) {
					uni.showToast({
						title: isrepeat[0].itemName + '重复',
						icon: 'none'
					})
					return;
				}
				if (this.isCheckDxData.length <= 0) {
					this.isCheckDxData = this.isCheckDx
				} else {
					const hasRepeat = this.isCheckDxData.filter((a, ai) => {
						const arr = this.isCheckDx.filter((b, bi) => {
							return b.name == a.name
						})
						return arr.length > 0
					})
					if (hasRepeat.length > 0) {
						uni.showToast({
							title: '已有重复项',
							icon: 'none'
						})
						return;
					}
					this.isCheckDxData = this.isCheckDxData.concat(this.isCheckDx)
				}
				this.dialog = false;
			},
			onSearch() {
				this.pageIndex = 1
				this.getReportAbnormalPageAxios({
					abnormalName: this.abnormalName,
					pageIndex: this.pageIndex,
					pageSize: 20
				})
			},
			// 获取所有异常
			getReportAbnormalPageAxios(data) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.getReportAbnormalPage(data).then((res) => {
					uni.hideLoading()
					this.totalCount = Math.ceil(res.data.result.totalCount / 20)
					this.dialogcontents = res.data.result.list.map((e) => {
						return {
							name: e.abnormalName,
							// Wpercentage: '82vw',
							// reportNo: e.abnormalCode
						}
					})
				})
			},
			// 获取所有体检项目
			getReportTemplateStencilPageAxios(data) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.getReportTemplateStencilPage(data).then((res) => {
					uni.hideLoading()
					this.tiOption.totalCount = Math.ceil(res.data.result.totalCount / 20)
					this.dialogcontents = res.data.result.list.map((e) => {
						e.name = e.itemName
						e.maxValue = e.maxVa
						e.minValue = e.minVa
						e.va = e.minVa + '~' + e.maxVa
						return e
					}).filter(b => {
						if (this.sex == '男') {
							return b.itemName.indexOf('女') <= -1
						} else {
							return b.itemName.indexOf('男') <= -1
						}
					})
				})
			},
			hidememberdialog() {
				this.memberdialog = false
			},
			// 选择会员
			chooseUser(e) {
				this.sex = e.sex == 2 ? '女' : '男',
					this.userId = e.userId;
				this.userName = e.userName;
			},
			//计算体质指数
			basicInput(e) {
				if (e.currentTarget.dataset.id == 0 || e.currentTarget.dataset.id == 1) {
					if (this.data.weight && this.data.height) {
						this.data.bodyIndex = (this.data.weight / Math.pow((this.data.height), 2)).toFixed(1)
						this.enterData[2].dataId = e.currentTarget.dataset.id + ''
					} else {
						this.data.bodyIndex = ''
						this.enterData[2].dataId = ''
					}
				}
				// if(e.detail.value == ''){
				// 	this.enterData[e.currentTarget.dataset.id].dataId = ''
				// }else{
				// 	this.enterData[e.currentTarget.dataset.id].dataId = e.currentTarget.dataset.id+''
				// }
			},
			seveAdd(e) {
				const _this = this;
				if(this.isSave){
					uni.showToast({
						title:'该数据已生成报告，请返回重新添加',
						icon:'none'
					})
					return
				}
				if (!this.userId) {
					uni.showToast({
						title: '请选择会员',
						icon: 'none'
					})
					return
				}
				if (!this.fillFormDate) {
					uni.showToast({
						title: '请选择体检时间',
						icon: 'none'
					})
					return
				}
				
				let data = {}
				this.enterData.map((a) => {
					if (!this.data[a.name]) {
						data[a.name] = -1.0
					} else {
						data[a.name] = Number(this.data[a.name])
					}
				})
				
				if(data.height == -1) {
					uni.showToast({
						title: '请填写身高',
						icon: 'none'
					})
					return
				}		
				if(data.weight == -1) {
					uni.showToast({
						title: '请填写体重',
						icon: 'none'
					})
					return
				}
				this.biochemistry.map((a) => {
					if (!this.data[a.name]) {
						data[a.name] = -1.0
					} else {
						data[a.name] = Number(this.data[a.name])
					}
				})
				const arr = this.auxiliaryData.concat(this.parameterValues)
				if(arr[0].value == '') {arr[0].value = -1.0}
				if(arr[1].value == '') {arr[1].value = -1.0}
				if(arr[2].value == '') {arr[2].value = -1.0}
				const individuals = this.isCheckDxData && this.isCheckDxData.length > 0 && this.isCheckDxData.map((a)=>{
					return {name:a.itemName,value:a.input,key:a.itemId}
				}) || []
				data.bloodPressure = !this.bloodPressure1 && !this.bloodPressure2 ? '-1' : (this.bloodPressure1 || -1) + '/' + (this.bloodPressure2 || -1 )
				data.parameterValues = arr
				data.individuals = individuals
				data.userId = this.userId
				data.userName = this.userName
				data.fillFormDate = this.fillFormDate
				data.status = e
				data.healthId = JSON.parse(localStorage.userInfo).id
				if(e == 3){
					if(this.id){
						data.id = Number(this.id)
						this.$api.HealthExaminationReportUpdate(data).then((res) => {
							if (res.data.returnCode == 200) {
								this.info = res.data.result
								_this.isSave = true
								setTimeout(()=>{
									_this.$refs.reportImg.toImg().then((base64)=>{
										var arr = base64.split(',')
										var mime = arr[0].match(/:(.*?);/)[1]
										var bstr = atob(arr[1]) 
										var nn = bstr.length 
										var u8arr = new Uint8Array(nn);
										while(nn--){
											u8arr[nn] = bstr.charCodeAt(nn);
										}
										var obj1 = new Blob([u8arr], {type:mime});
										_this.$api.HealthExaminationReportUploadWord({fileOne:obj1},res.data.result.newHealthExaminationReportEntityRes.id).then((ares) => {
											uni.hideLoading()
											if(ares.returnCode == 200){
												window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+ares.result.url
											}
										})
									})
								},1000)
							}
						})
					}else{
						uni.showLoading({title:'加载中'})
						this.$api.HealthExaminationReportSave(data).then((res) => {
							if (res.data.returnCode == 200) {
								this.info = res.data.result
								_this.isSave = true
								setTimeout(()=>{
									_this.$refs.reportImg.toImg().then((base64)=>{
										var arr = base64.split(',')
										var mime = arr[0].match(/:(.*?);/)[1]
										var bstr = atob(arr[1]) 
										var nn = bstr.length 
										var u8arr = new Uint8Array(nn);
										while(nn--){
											u8arr[nn] = bstr.charCodeAt(nn);
										}
										var obj1 = new Blob([u8arr], {type:mime});
										_this.$api.HealthExaminationReportUploadWord({fileOne:obj1},res.data.result.newHealthExaminationReportEntityRes.id).then((ares) => {
											uni.hideLoading()
											if(ares.returnCode == 200){
												window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+ares.result.url
											}
										})
									})
								},1000)
							}
						})
					}
				}else{
					if(this.id){
						data.id = Number(this.id)
						this.$api.HealthExaminationReportUpdate(data).then((res) => {
							if (res.data.returnCode == 200) {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								uni.navigateTo({
									url:'/pages/quickly/healthStatus/navigation?current=1'
								})
							}
						})
					}else{
						this.$api.HealthExaminationReportSave(data).then((res) => {
							if (res.data.returnCode == 200) {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								uni.navigateTo({
									url:'/pages/quickly/healthStatus/navigation?current=1'
								})
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/quickly/healthStatus/common.scss';

	.content {
		.modular {
			width: 702upx;
			margin: 0 auto 24upx;
			background-color: #FFFFFF;
			border-radius: 14upx;
			box-sizing: border-box;

			.title {
				image {
					width: 140upx;
					height: 36upx;
					display: table;
					margin:0 auto;
					padding: 28upx 0;
				}
			}

			table {
				width: 702upx;
				border-spacing: 0 !important;

				tr {
					background-color: #FFFFFF;
					display: flex;
					padding: 16upx 0;
					box-sizing: border-box;
					text-align: center;
					border-bottom: 1upx solid #E3E4EB;
					margin: 0 8upx;

					td {
						color: #333333;
						display: flex;
						justify-content: center;
						align-items: center;
						flex: 1;
						text-align: center;
						min-height: 60upx;

						input {
							width: 100%;
							font-size: 28upx;
							height: 100%;
						}
					}

					td:last-child {
						border: 0;
					}
				}

				tr:nth-child(1) {
					background-color: #F6F7FB;
					box-sizing: border-box;
					border-radius: 12upx;
					border: none;
				}

				tr:last-child {
					border: none;
				}

				.delImage {
					width: 22upx;
					height: 24upx;
					margin: auto 24upx auto 8upx;
				}

				.delStyle {
					display: flex;
				}

				.addOther {
					width: 686upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 12upx;
					color: #A8B2D1;
					font-size: 26upx;
					margin: 0 8upx;

					image {
						width: 26upx;
						height: 26upx;
						margin-right: 14upx;
						vertical-align: revert;
					}
				}
			}
		}

		.modular:last-child {
			padding-bottom: 36upx;
		}
	}

	.dialog {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;

		.bg {
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .5);
		}

		.closeImage {
			position: fixed;
			bottom: 9%;
			left: 50%;
			transform: translateX(-50%);

			image {
				width: 42upx;
				height: 42upx;
			}
		}

		.content {
			padding: 4% 3%;
			position: absolute;
			width: 94%;
			// height: 862upx;
			left: 3%;
			top: 10%;
			background: #fff;
			box-sizing: border-box;

			.wyb-table-header {
				width: 400upx !important;
			}

			.search {
				display: flex;
				font-size: 28upx;
				align-items: center;
				margin-bottom: 30upx;

				input {
					height: 50upx;
					padding-left: 10upx;
					border: 1upx solid #E4E4E4;
					border-radius: 8upx;
					flex: 1;
					font-size: 28upx;
				}

				span {
					display: inline-block;
					padding: 8upx 18upx;
					color: #333333;
					margin-left: 20upx;
					border-radius: 8upx;
					background-color: #EBFFF8;
					font-size: 28upx;
				}

				.solidColor {
					background-color: #38CB97;
					color: #FFFFFF;
				}

				image {
					width: 40upx;
					margin-left: 40upx;
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			margin-top: 12upx;

			span {
				background: #F5F5F5;
				display: inline-block;
				margin: 0 60upx;
				width: 162upx;
				height: 54upx;
				text-align: center;
				line-height: 54upx;
				font-size: 26upx;
				border-radius: 4upx;
				color: #333333;
				font-size: 28upx;
			}
		}
	}
</style>
